<template>
	<view class="classlist">
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content" >
			<view class="item" @click="goPreview(item)" v-for="item in classList" :key="item._id"> 

				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData? 'noMore':'loading'"></uni-load-more>
		</view>
		<!-- <view class="safe-area-inset-bottom ">
			
		</view> -->
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad,onUnload,onReachBottom,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
import {apiGetClassList,apiGetHistorysList} from "@/api/apis.js"
import {gotoHome} from "@/utils/common.js"

//分类列表数据
const classList = ref([])

const noData = ref(false)
//定义data参数
const queryParams = {
	pageNum:1,
	pageSize:12
}
let pageName;
onLoad((e)=>{
	let {id=null,name=null,type=null} = e;
	if(type) queryParams.type = type;
	if(id) queryParams.classid = id;
	pageName = name
	// console.log(id,name);
	uni.setNavigationBarTitle({
		title:name
	})
	
	//获取分类列表
	getClassList();
})

onReachBottom(()=>{
		if(noData.value) return;
		queryParams.pageNum++;
		getClassList()
	})

const goPreview = (item)=> {
	console.log('99999999');
	console.log(item,'索引')
	
	uni.navigateTo({
		// url:"/pages/preview/preview",
		url:`/pages/preview/preview?id=${item._id}`,
	})
}

//获取分类列表网格数据
const getClassList = async ()=> {
	let res;
	if(queryParams.classid) res = await apiGetClassList(queryParams);
	if(queryParams.type) res = await apiGetHistorysList(queryParams);
	// console.log('分类',res);
	classList.value = [...classList.value,...res.data];
	if(queryParams.pageSize>res.data.length) noData.value = true;
	uni.setStorageSync("storgClassList",classList.value);
	console.log('分类',res.data);
}

//分享给好友
onShareAppMessage((e)=>{
	// console.log(e,'eeeeee');
	console.log(queryParams.classid,'8777');
	return {
		title:"小螃蟹壁纸-"+pageName,
		// path:'/pages/index/index'
		// 因为是内页，所以要带参数
		path:'/pages/classlist/classlist?id='+queryParams.classid+"&name="+pageName
	}
})

//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"小螃蟹壁纸-"+pageName,
		// imageUrl:'https://imgoss.ilive.cn/image/202504/16/1744776999288_365x204.png.jpg'
	    query:"id="+queryParams.classid+"&name="+pageName
	}
})

//离开页面
onUnload(()=>{
	//离开页面时清除缓存
	uni.removeStorageSync("storgClassList")
})
</script>

<style lang="scss" scoped>
.classlist{
	.content{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap:5rpx;
		padding:5rpx;
		.item{
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
}

</style>
